<!doctype html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html lang="en">


<head>

    <meta charset="UTF-8">
    <title>Document</title>
    <link href="resources/assets/css/jquery-ui.css" rel="stylesheet">
    <link href="resources/assets/css/style.css" rel="stylesheet"/>
    <link href="resources/assets/css/jquery.bxslider.css" rel="stylesheet"/>


    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script src="resources/assets/js/jquery.bxslider.min.js"></script>
    <script src="resources/assets/js/jquery.knob.js"></script>
    <script src="resources/assets/js/jquery.ui.widget.js"></script>
    <script src="resources/assets/js/jquery.iframe-transport.js"></script>
    <script src="resources/assets/js/jquery.fileupload.js"></script>
    <script src="resources/assets/js/script.js"></script>

    <script>
        var url = "${sessionScope.root_path}";
        $(function () {
            $('#tabs').tabs({
                activate: function (event, ui) {
                    $("#tabs-2.tab").html("");
                    if (ui.newPanel.attr("id") == "tabs-2") {
                        $.ajax({
                            url: url + "list",

                            type: "POST",

                            beforeSend: function (xhr) {
                                xhr.setRequestHeader("Accept", "application/json");
                                xhr.setRequestHeader("Content-Type", "application/json");
                            },
                            success: function (data) {
                                var items = "";
                                console.log(data);
                                var src;
                                var i = 0;
                                for (i = 0; i < data.length; i++) {
                                    src = url + "uploads/" + data[i];
                                    items += "<li><img src='" + src + "'/></li>";
                                }
                                items = '<ul class="bxslider">' + items + "</ul>";
                                if (i > 0) {
                                    $("#tabs-2").html(items);


                                    $('.bxslider').bxSlider({
                                        minSlides: 4,
                                        maxSlides: 4,
                                        slideWidth: 170,
                                        slideMargin: 10,
                                        ticker: true,
                                        speed: 20000
                                    });
                                }

                            },
                            error: function (err) {
                                console.log(err);
                            }
                        });
                    }
                }

            });


        });


    </script>

</head>
<body>


<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Upload</a></li>
        <li><a href="#tabs-2">Result</a></li>
    </ul>
    <div id="tabs-1">

        <form id="upload" method="post" action="${sessionScope.path_suffix}upload" enctype="multipart/form-data">
            <p style="color: #ffffff"> Width:&nbsp;</p><input type="number" name="w" value="200"><br>

            <p style="color: #ffffff">Height:</p><input type="number" name="h" value="150"><br>

            <div id="drop">

                Drop images Here<br>(${sessionScope.supported_formats})<br>

                <a>Browse</a>

                <input type="file" name="file" multiple/>
            </div>

            <ul>
            </ul>

        </form>
    </div>
    <div id="tabs-2">

    </div>

</div>


</body>
</html>